<script lang="ts" setup>
import { useSettingStore } from '@/stores/setting'

const store = useSettingStore()
const theme = ref(store.settings.theme)

const predefineColors = ref([
  '#409eff',
  '#ed7814',
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585'
])

watch(theme, value => {
  store.changeSetting({ key: 'theme', value })
})
</script>

<template>
  <el-color-picker v-model="theme" :predefine="predefineColors" />
</template>
